<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台用户管理</title>
 <%@include file="/WEB-INF/base.jspf"%>
  <style type="text/css">
  	.body_wrapper{
  		height: 100%;
  		width: 100%;
  		box-sizing: border-box;
  		padding: 0px 20px;
  		
  		
  	}
  		.modal-dialog {
		max-width: 1000px;
	}
  	.wrapper_buttons{
  		position: relative;
  	}
  	.shezhileiContent{
  		width: 160px;
  		height: 150px;
  		border: 1px solid  #9c8f8f;
  		border-radius: 5px;
  		box-sizing: border-box;
  		padding: 13px;
  		position: absolute;
  		right: 0px;
  		top: 36px;
  		z-index: 999;
  		background: #fff;
  		
  		
  	}
  	.shezhileiContent li {
  		margin-bottom:10px ;
  	}
  	.shezhileiContent li span{
  		margin-left: 6px;
  	}
  	.wrapper_buttons input{
  		height: 32px;
  		width: 174px;
  		margin-left: 10px;
  	}
  	.wrapper_buttons button{
  		margin-left: 10px;
  	}
  </style>
</head>
<body>
	<div class="body_wrapper">
		<div class="wrapper_buttons" style="display: flex;margin-top: 20px;">
			<input type="datetime-local" name="" id="" value="" class="form-control"  />
			<input type="datetime-local" name="" id="" value="" class="form-control"  />
			<input type="text" name="" id="" value="" class="form-control" placeholder="输入系统查询"/>
			<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#addAndEditModal">查询</button>
			<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#addAndEditModal">导出</button><br />
			</div>
			<div class="wrapper_buttons" style="display: flex;margin-bottom: 20px;">
			<input type="text" name="" id="" value="" class="form-control"  placeholder="输入操作账号"/>
			<input type="text" name="" id="" value=""class="form-control"  placeholder="输如操作ip查询"/>
			
			
		</div>
		
		
		<table id="table_id_example" class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>账号</th>
							<th>日志类型</th>
							<th>操作记录</th>
							<th>IP</th>
							<th>IP地址</th>
							<th>操作时间</th>
							<th>操作</th>
							
						</tr>
					</thead>
					<tbody>
						
						<tr>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td><button class="layui-btn layui-btn-xs" data-toggle="modal" data-target="#">详情</button></td>
							
						</tr>	
						<tr>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td><button class="layui-btn layui-btn-xs" data-toggle="modal" data-target="#">详情</button></td>
							
						</tr>	
						<tr>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td>订单号</td>
							<td><button class="layui-btn layui-btn-xs" data-toggle="modal" data-target="#">详情</button></td>
							
						</tr>	
										
					</tbody>
				</table>
		
		
	</div>
 



<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  /*layer.msg('Hello World');*/
}();

function  dataTable01(){
			$("#table_id_example").DataTable({
		      // "bPaginate": true,
		      "bLengthChange": true,      
		      "bSort": false,
		      // "bInfo": true,
		      "bAutoWidth": false,
//		         "bServerSide":true,
		      'aLengthMenu':[5, 10, 20],
		       "searching": true, 
		       "dom": "t<'tableinfo'i<'tableSearch'p>l>",
//		    "searching": true,l
		       "language": {//语言设置  
		            "lengthMenu": "每页显示 _MENU_ 条记录",     
		            "zeroRecords": "没有检索到数据",     
		            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
		            "info": "没有数据",     
		            "oPaginate": {     
		                "sFirst": "首页",     
		                "sPrevious": "前一页",     
		                "sNext": "后一页",     
		                "sLast": "尾页"    
		          	},
		            "search":"",
		            "searchPlaceholder": "请输入关键字",
		            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
		            "infoEmpty":      "没有找到匹配的信息",
		         }
		                 
		                 
		    })
		}
		 dataTable01();
			var appendNumberToPage = function() {
				var html = 
					"<input type='text' class='class-input-pageNumber input-xs' />"+
						"<span class='class-span-searchBtn btn btn-default btn-xs'>Go</span>"
					var searchDiv = document.querySelectorAll(".tableSearch")
					for (var i = 0; i < searchDiv.length; i++) {
						var item = searchDiv[i]
						item.insertAdjacentHTML("beforeend", html)
					}
				}	
			appendNumberToPage()
			// class-tableDataTable
			$(".class-span-searchBtn").click(function(){
				var pageNum = Number($(this).siblings(".class-input-pageNumber").val())
				$(this).parents(".tableinfo").siblings(".class-tableDataTable").DataTable().page(pageNum - 1).draw(false)
			});
			/*
			function shuaxinButton(){//刷新按钮事件
				$('#classify_right_refresh').click(function() {
					var iframeElement = window.parent.document.querySelector("#testFrame")
		    		iframeElement.src = "/huishen/sbgl/keepUpPlan.do"
				})
			}*/
			
			function shezhileixianshiyincang(){//设置列的显示与隐藏
				 $('.sheizhilie').click(function(){ 
				    if($('.shezhileiContent').is(':hidden')){ 
				    	$('.shezhileiContent').show();
				    
				    }else{
				    	$('.shezhileiContent').hide();
				    } 
				    event.stopPropagation();
				})  
				$('.shezhileiContent').click(function(){ 
				    event.stopPropagation();
				})
				$('body').click(function(){$(".shezhileiContent").hide();});
			}
			shezhileixianshiyincang()
</script> 
</body>
</html>